<template>

	<div>
		<view v-if="loading">
			<van-loading size="24px" color="#1989fa" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);">加载中...</van-loading>
		</view>
		<view v-else>
			<div>
				<div class="container">
					<div class="left" @click="tzrqxz">
						<div class="left-left">{{sjrqsz[0]}}</div>
						<div class="left-right">
							<div class="top">{{sjrqsz[1]}}</div>
							<div class="bottom">{{sjrqsz[2]}}</div>
						</div>
					</div>
					<div class="right"></div>
				</div>

				<!-- previous-margin="20rpx" next-margin="20rpx" 左右距离 -->
				<swiper class="banner-container" :current="dates.length-2" previous-margin="20px" next-margin="20px"
					@change="hdlbt">
					<block v-for="(item,index) in dates" :key="index">
						<swiper-item class="banner-item">
							<view class="banner-box">
								<div v-if="index == dates.length-1"
									style="width: 100%;height: 100%;position: relative;">
									<div
										style="color: #cccccc;width: 80px;height: 30px;display: flex;align-items: center;justify-content: center;font-size: 25px;position: absolute;top: calc(50% - 15px);left: calc(50% - 40px);">
										{{mtrq}}</div>
									<div
										style="width: 100%;height: 60px;position: absolute;top: 70%;display: flex;flex-direction: column;align-items: center;">
										<div style="flex: 1;display: flex;justify-content: center;align-items: center;">
											距离明天更新还有</div>
										<div style="flex: 1;display: flex;justify-content: center;align-items: center;">
											<van-count-down :time="time" format="HH 时 mm 分 ss 秒" />
										</div>
									</div>
								</div>


								<div class="lbtlmxs" v-if="index !== dates.length-1" @click="djtzwz(item)">
									<div class="box1">
										<div class="box3">{{item.title}}</div>
									</div>
									<div class="box2">
										<div>
											{{item.article}}
										</div>
										<div>
											<div>{{item.comment_count == undefined ? 142 : item.comment_count}}喜欢 ·
												{{item.favourite_count == undefined ? 60 : item.favourite_count}}想法
											</div>
											<div>
												<div>阅读</div>
											</div>
										</div>
									</div>
								</div>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<!-- 底部 -->
				<van-tabbar :active="active" @change="onChange">
					<van-tabbar-item icon="home-o">首页</van-tabbar-item>
					<van-tabbar-item icon="smile-comment-o">探索</van-tabbar-item>
					<van-tabbar-item icon="contact">我</van-tabbar-item>
				</van-tabbar>
			</div>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				dates: [],
				mtsj: [],
				wzzt: {},
				sjrqsz: [],
				time: 30 * 60 * 60 * 1000,
				loading: true,
				mtrq:''
			}
		},
		onLoad() {
			// 模拟获取数据
			setTimeout(() => {
				this.loading = false; // 数据获取成功后，隐藏loading
				// 更新其他数据
			}, 2000);
		},
		methods: {
			tzrqxz(){
			  let arr = this.mtsj; // 定义一个数组
			  uni.setStorage({ // 存储数据到本地
			    key: 'arr', // 键名
			    data: arr, // 数据
			    success: function () { // 成功回调
			      console.log('success');
			      uni.navigateTo({ // 跳转到新页面
			        url: '/pages/xzrq/xzrq'
			      })
			    }
			  })
			},
			getTomorrowDate() {
			    // 获取当前日期
			    var today = new Date();
			    // 获取明天的日期
			    var tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
			    // 获取月份和日期
			    var month = tomorrow.getMonth() + 1;
			    var date = tomorrow.getDate();
			    // 生成指定格式的日期字符串
			    var dateString = (month < 10 ? '0' : '') + month + '/' + date;
			    return dateString;
			},
			djtzwz(item) {
				uni.navigateTo({
					url: '/pages/wenzhang/wenzhang?item=' + JSON.stringify(item)
				});
			},
			hdlbt(sj) {
				if (sj.detail.current !== this.dates.length - 1) {
					let rqsz = this.splitDate(this.dates[sj.detail.current].date_by_day.toString())
					this.sjrqsz = [...this.formatDate(this.dates[sj.detail.current].date_by_day), this.hqylrq(rqsz[
						0], rqsz[1], rqsz[2])]
					// console.log(this.dates[sj.detail.current].date_by_day);
					// console.log(this.formatDate(this.dates[sj.detail.current].date_by_day));
					// console.log(this.dates[sj.detail.current].date_by_day);
				} else {
					let rqsz = this.splitDate(this.getNextDay(this.dates[this.dates.length - 2].date_by_day)
						.toString())
					this.sjrqsz = [...this.formatDate(this.getNextDay(this.dates[this.dates.length - 2]
						.date_by_day)), this.hqylrq(rqsz[0], rqsz[1], rqsz[2])]

				}
			},
			// ["24", "周五"]
			formatDate(dateString) {
				// console.log(dateString);
				const formattedDateString = dateString.toString().slice(0, 4) + '-' + dateString.toString().slice(
					4, 6) + '-' + dateString.toString().slice(6);
				const date = new Date(formattedDateString);
				const day = date.toLocaleDateString('zh-CN', {
					day: '2-digit'
				});
				const weekday = date.toLocaleDateString('zh-CN', {
					weekday: 'short'
				});
				return [this.extractNumbers(day)[0], weekday];
			},
			splitDate(dateString) {
				const year = dateString.slice(0, 4);
				const month = dateString.slice(4, 6);
				const day = dateString.slice(6);
				return [year, month, day];
			},
			extractNumbers(string) {
				const regex = /\d+/g;
				const matches = string.match(regex);
				return matches ? matches.map(num => num.padStart(2, '0')) : [];
			},
			// 获取明天日期
			getNextDay(dateStr) {
				let year = dateStr.toString().slice(0, 4);
				let month = dateStr.toString().slice(4, 6);
				let day = dateStr.toString().slice(6);
				let date = new Date(year, month - 1, day);
				date.setDate(date.getDate() + 1);
				year = date.getFullYear()
				month = (date.getMonth() + 1).toString().padStart(2, '0');
				day = date.getDate().toString().padStart(2, '0');
				return parseInt(`${year}${month}${day}`)
			},
			onChange(event) {
				// event.detail 的值为当前选中项的索引
				let active = event.detail
				if (active == 1) {
					uni.navigateTo({
						url: '/pages/index2/index2'
					});
				}
				if (active == 2) {
					uni.navigateTo({
						url: '/pages/index3/index3'
					});
				}
			},
			hqylrq(sy, sm, sd) {
				sy = Number(sy)
				sm = Number(sm)
				sd = Number(sd)
				let lunarYearArr = [
						0x0b557, //1949
						0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950,
						0x06aa0, //1950-1959
						0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57,
						0x056a0, //1960-1969
						0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0,
						0x195a6, //1970-1979
						0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60,
						0x09570, //1980-1989
						0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5,
						0x092e0, //1990-1999
						0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0,
						0x0cab5, //2000-2009
						0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0,
						0x0a930, //2010-2019
						0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65,
						0x0d530, //2020-2029
						0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520,
						0x0dd45, //2030-2039
						0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20,
						0x0ada0, //2040-2049
						0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4,
						0x0aae0, //2050-2059
						0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0,
						0x055d4, //2060-2069
						0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0,
						0x052b0, //2070-2079
						0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4,
						0x0d160, //2080-2089
						0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150,
						0x0f252, //2090-2099
						0x0d520 //2100
					],
					lunarMonth = ['正', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊'],
					lunarDay = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '初', '廿'],
					tianGan = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'],
					diZhi = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
				// 公历转农历函数
				return sloarToLunar(sy, sm, sd)

				function sloarToLunar(sy, sm, sd) {
					// 输入的月份减1处理
					sm -= 1;

					// 计算与公历基准的相差天数
					// Date.UTC()返回的是距离公历1970年1月1日的毫秒数,传入的月份需要减1
					let daySpan = (Date.UTC(sy, sm, sd) - Date.UTC(1949, 0, 29)) / (24 * 60 * 60 * 1000) + 1;
					let ly, lm, ld;
					// 确定输出的农历年份
					for (let j = 0; j < lunarYearArr.length; j++) {
						daySpan -= lunarYearDays(lunarYearArr[j]);
						if (daySpan <= 0) {
							ly = 1949 + j;
							// 获取农历年份确定后的剩余天数
							daySpan += lunarYearDays(lunarYearArr[j]);
							break
						}
					}

					// 确定输出的农历月份
					for (let k = 0; k < lunarYearMonths(lunarYearArr[ly - 1949]).length; k++) {
						daySpan -= lunarYearMonths(lunarYearArr[ly - 1949])[k];
						if (daySpan <= 0) {
							// 有闰月时，月份的数组长度会变成13，因此，当闰月月份小于等于k时，lm不需要加1
							if (hasLeapMonth(lunarYearArr[ly - 1949]) && hasLeapMonth(lunarYearArr[ly - 1949]) <=
								k) {
								if (hasLeapMonth(lunarYearArr[ly - 1949]) < k) {
									lm = k;
								} else if (hasLeapMonth(lunarYearArr[ly - 1949]) === k) {
									lm = '闰' + k;
								} else {
									lm = k + 1;
								}
							} else {
								lm = k + 1;
							}
							// 获取农历月份确定后的剩余天数
							daySpan += lunarYearMonths(lunarYearArr[ly - 1949])[k];
							break
						}
					}

					// 确定输出农历哪一天
					ld = daySpan;

					// 将计算出来的农历月份转换成汉字月份，闰月需要在前面加上闰字
					if (hasLeapMonth(lunarYearArr[ly - 1949]) && (typeof(lm) === 'string' && lm.indexOf('闰') > -
							1)) {
						lm = `闰${lunarMonth[/\d/.exec(lm) - 1]}`
					} else {
						lm = lunarMonth[lm - 1];
					}

					// 将计算出来的农历年份转换为天干地支年
					ly = getTianGan(ly) + getDiZhi(ly);

					// 将计算出来的农历天数转换成汉字
					if (ld < 11) {
						ld = `${lunarDay[10]}${lunarDay[ld-1]}`
					} else if (ld > 10 && ld < 20) {
						ld = `${lunarDay[9]}${lunarDay[ld-11]}`
					} else if (ld === 20) {
						ld = `${lunarDay[1]}${lunarDay[9]}`
					} else if (ld > 20 && ld < 30) {
						ld = `${lunarDay[11]}${lunarDay[ld-21]}`
					} else if (ld === 30) {
						ld = `${lunarDay[2]}${lunarDay[9]}`
					}
					return `${lm}月${ld}`
				}

				// 计算农历年是否有闰月，参数为存储农历年的16进制
				// 农历年份信息用16进制存储，其中16进制的最后1位可以用于判断是否有闰月
				function hasLeapMonth(ly) {
					// 获取16进制的最后1位，需要用到&与运算符
					if (ly & 0xf) {
						return ly & 0xf
					} else {
						return false
					}
				}

				// 如果有闰月，计算农历闰月天数，参数为存储农历年的16进制
				// 农历年份信息用16进制存储，其中16进制的第1位（0x除外）可以用于表示闰月是大月还是小月
				function leapMonthDays(ly) {
					if (hasLeapMonth(ly)) {
						// 获取16进制的第1位（0x除外）
						return (ly & 0xf0000) ? 30 : 29
					} else {
						return 0
					}
				}

				// 计算农历一年的总天数，参数为存储农历年的16进制
				// 农历年份信息用16进制存储，其中16进制的第2-4位（0x除外）可以用于表示正常月是大月还是小月
				function lunarYearDays(ly) {
					let totalDays = 0;

					// 获取正常月的天数，并累加
					// 获取16进制的第2-4位，需要用到>>移位运算符
					for (let i = 0x8000; i > 0x8; i >>= 1) {
						let monthDays = (ly & i) ? 30 : 29;
						totalDays += monthDays;
					}
					// 如果有闰月，需要把闰月的天数加上
					if (hasLeapMonth(ly)) {
						totalDays += leapMonthDays(ly);
					}

					return totalDays
				}

				// 获取农历每个月的天数
				// 参数需传入16进制数值
				function lunarYearMonths(ly) {
					let monthArr = [];

					// 获取正常月的天数，并添加到monthArr数组中
					// 获取16进制的第2-4位，需要用到>>移位运算符
					for (let i = 0x8000; i > 0x8; i >>= 1) {
						monthArr.push((ly & i) ? 30 : 29);
					}
					// 如果有闰月，需要把闰月的天数加上
					if (hasLeapMonth(ly)) {
						monthArr.splice(hasLeapMonth(ly), 0, leapMonthDays(ly));
					}

					return monthArr
				}

				// 将农历年转换为天干，参数为农历年
				function getTianGan(ly) {
					let tianGanKey = (ly - 3) % 10;
					if (tianGanKey === 0) tianGanKey = 10;
					return tianGan[tianGanKey - 1]
				}

				// 将农历年转换为地支，参数为农历年
				function getDiZhi(ly) {
					let diZhiKey = (ly - 3) % 12;
					if (diZhiKey === 0) diZhiKey = 12;
					return diZhi[diZhiKey - 1]
				}
			},
			// 获取日期函数
			getDates() {
				this.dates = Array.from({
					length: 10
				}, (_, i) => {
					let date = new Date();
					date.setDate(date.getDate() + 1 - i);
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					month = month < 10 ? '0' + month : month;
					let day = date.getDate();
					day = day < 10 ? '0' + day : day;
					return `${year}-${month}-${day}`;
				});
			},
			// 处理获取到的数据分成三个月
			hqmtsj() {
				let groupedData = this.mtsj.reduce((acc, item) => {
					let dateString = item.date_by_day.toString();
					let formattedDateString =
						`${dateString.slice(0, 4)}-${dateString.slice(4, 6)}-${dateString.slice(6)}`;
					let sjc = new Date(formattedDateString);
					let month = sjc.getMonth() + 1;
					if (!acc[month]) {
						acc[month] = [];
					}
					acc[month].push(item);
					return acc;
				}, {});
				this.mtsj = groupedData
			},
			hqxssj() {
				// 获取当前日期对象
				var date = new Date();
				// 获取当前月份，0表示1月，11表示12月
				var currentMonth = date.getMonth() + 1;
				// 获取前一个月份
				var previousMonth = currentMonth - 1;
				// 如果前一个月份为0，表示上一年的12月
				if (previousMonth == 0) {
					previousMonth = 12;
				}
				// 获取前两个月份
				var twoMonthsAgo = currentMonth - 2;
				// 如果前两个月份为负数，表示上一年的11月或10月
				if (twoMonthsAgo < 0) {
					twoMonthsAgo += 12;
				}
				// console.log(currentMonth, previousMonth, twoMonthsAgo);
				// 创建一个空数组来存放结果
				var result = [];

				// 定义一个函数来从一个数组中获取最后n个元素，并把它们添加到结果数组中
				function getLastN(arr, n) {
					// 如果n大于0并且数组不为空
					if (n > 0 && arr.length > 0) {
						// 使用slice(-n)和reverse()方法来获取最后n个元素，并反转顺序
						var lastN = arr.slice(-n).reverse();
						// 使用concat()方法把lastN添加到结果数组中
						result = result.concat(lastN);
						// 更新n的值为n减去lastN的长度
						n = n - lastN.length;
					}
					// 返回更新后的n值
					return n;
				}

				// 定义一个变量num来表示需要获取的元素数量
				var num = 10;

				// 从this.mtsj.c开始获取num个元素，并更新num的值
				num = getLastN(this.mtsj[currentMonth], num);

				// 如果num还大于0，就继续从this.mtsj.b获取num个元素，并更新num的值
				if (num > 0) {
					num = getLastN(this.mtsj[previousMonth], num);
				}

				// 如果num还大于0，就继续从this.mtsj.a获取num个元素，并更新num的值
				if (num > 0) {
					num = getLastN(this.mtsj[twoMonthsAgo], num);
				}
				// result[0] = ''
				// 打印结果数组
				this.dates = result.reverse()
				this.dates.shift()
				this.dates.push({
					'date_by_day': getTomorrow(this.dates[this.dates.length - 1].date_by_day.toString())
				})

				function getTomorrow(dateString) {
					let year = dateString.slice(0, 4);
					let month = dateString.slice(4, 6);
					let day = dateString.slice(6);
					let date = new Date(year, month - 1, day);
					date.setDate(date.getDate() + 1);
					let tomorrow = date.toLocaleDateString('en-CA', {
						year: 'numeric',
						month: '2-digit',
						day: '2-digit',
						timeZone: 'Asia/Shanghai'
					}).replace(/-/g, "");
					return tomorrow - 0;
				}
			}
		},
		mounted() {
			this.mtrq = this.getTomorrowDate()
			let now = new Date();
			let tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
			let timeLeft = tomorrow - now;
			this.time = timeLeft
			this.getDates()
			// let formattedDate = parseInt(this.dates[0].replace(/-/g, ""));
			// console.log(formattedDate);
			// if (uni.getStorageSync('dates') == '') {
				// console.log(this.dates);
				uni.request({
					url: `https://apis.netstart.cn/daodu/lessons?form=${this.dates[this.dates.length-1]}&to=${this.dates[0]}`,
					method: 'GET',
					success: (res) => {
						this.mtsj = res.data
						this.hqmtsj()
						this.hqxssj()
						this.dates.filter((e, i) => {
							if (i !== 9) {
								uni.request({
									url: `https://apis.netstart.cn/daodu/lessons/${e.id}/activity_stats`,
									method: 'GET',
									success: (res) => {
										e.comment_count = res.data.comment_count
										e.favourite_count = res.data
											.favourite_count
									}
								});
							}
						})
						// console.log(this.dates);
						// console.log(this.dates, 'this.dates');
						// uni.setStorageSync('dates', JSON.stringify(this.dates));
						// uni.setStorageSync('mtsj', JSON.stringify(this.mtsj));
						if (!this.dates[0].comment_count) {
								this.dates.filter((e, i) => {
									if (i !== 9) {
										uni.request({
											url: `https://apis.netstart.cn/daodu/lessons/${e.id}/activity_stats`,
											method: 'GET',
											success: (res) => {
												e.comment_count = res.data.comment_count
												e.favourite_count = res.data.favourite_count
											}
										});
									}
								})
							} else {
								this.dates.filter((e, i) => {
									if (i !== 9) {
										uni.request({
											url: `https://apis.netstart.cn/daodu/lessons/${e.id}/activity_stats`,
											method: 'GET',
											success: (res) => {
												e.comment_count = res.data.comment_count
												e.favourite_count = res.data.favourite_count
											}
										});
									}
								})
							}
							let rqsz = this.splitDate(this.getNextDay(this.dates[this.dates.length - 3].date_by_day)
								.toString())
							this.sjrqsz = [...this.formatDate(this.getNextDay(this.dates[this.dates.length - 3]
								.date_by_day)), this.hqylrq(rqsz[0], rqsz[1], rqsz[2])]
					}
				});
			// } else {
			// 	this.dates = JSON.parse(uni.getStorageSync('dates'))
			// 	if (!this.dates[0].comment_count) {
			// 		this.dates.filter((e, i) => {
			// 			if (i !== 9) {
			// 				uni.request({
			// 					url: `https://apis.netstart.cn/daodu/lessons/${e.id}/activity_stats`,
			// 					method: 'GET',
			// 					success: (res) => {
			// 						e.comment_count = res.data.comment_count
			// 						e.favourite_count = res.data.favourite_count
			// 					}
			// 				});
			// 			}
			// 		})
			// 	} else {
			// 		this.dates.filter((e, i) => {
			// 			if (i !== 9) {
			// 				uni.request({
			// 					url: `https://apis.netstart.cn/daodu/lessons/${e.id}/activity_stats`,
			// 					method: 'GET',
			// 					success: (res) => {
			// 						e.comment_count = res.data.comment_count
			// 						e.favourite_count = res.data.favourite_count
			// 					}
			// 				});
			// 			}
			// 		})
			// 	}
			// 	console.log(this.dates);
			// }
			

		}
	}
</script>

<style lang="less">
	body {
		background-color: #e1ebf4;
		height: 100%;
	}

	/* 轮播图 */
	.banner-container {
		box-sizing: border-box;
		padding-bottom: 55px;
		width: 100%;
		height: 925rpx;
	}

	.banner-item {
		display: flex;
		justify-content: center;
	}

	.banner-box {
		width: 95%;
		/* 控制两张图片的间距 */
		height: 100%;
		background-color: #ffffff;
		border-radius: 10px;
	}

	.banner-img {
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}

	.container {
		display: flex;
		box-sizing: border-box;
		padding: 20px;
	}

	.left,
	.right {
		flex: 1;
	}

	.left {
		display: flex;
	}

	.left-left,
	.left-right {
		flex: 1;

	}

	.left-left {
		font-size: 30px;
		color: #979b9f;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-right: 10px;
	}

	.left-right {
		display: flex;
		flex-direction: column;
	}

	.top,
	.bottom {
		flex: 1;
		color: #979b9f;
		font-size: 15px;
		display: flex;
		align-items: center;
	}

	.van-hairline--top-bottom {
		background-color: #cadce8 !important;
	}

	.lbtlmxs {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		/* 上下两个盒子 */
		.box1 {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.box1,
		.box2 {
			flex: 1;
			height: 50%;
		}

		.box2 {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 0 10px;

			>div:nth-child(1) {
				flex: 3;
				overflow: hidden;
				-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent);
				mask-image: linear-gradient(to bottom, black 50%, transparent);

			}

			>div:nth-child(2) {
				// flex: 1;
				width: 100%;
				height: 40px;
				// background-color: red;
				display: flex;

				>div {
					flex: 1;
				}

				>div:nth-child(1) {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
					color: #a6a6a6;
				}

				>div:nth-child(2) {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					box-sizing: border-box;
					padding-right: 20px;

					>div {
						width: 60px;
						height: 25px;
						background-color: #c4a068;
						color: white;
						border-radius: 20px;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 12px
					}
				}
			}
		}

		/* 上面盒子里的右边盒子 */
		.box3 {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25px;
			width: 25%;
			height: 130px;
			writing-mode: vertical-lr;
			font-weight: 400;
		}
	}
</style>
